<template>
    <div>
  
        <mh></mh>
  
      <main class="" id="main-collapse">
        <div>
        
        
          课程详情页
  
          <input type="text"  />
  
          <button class="h-btn">默认</button>
  
          <h-switch>测试</h-switch>
  
          <div>
              <Form
        ref="form"
        :showErrorTip="showErrorTip"
        :rules="rules"
        :model="model"
      >
        <FormItem label="用户名" prop="name">
          <template v-slot:label>  用户名 </template>
          <input type="text" v-model="model.name">
        </FormItem>
        <FormItem label="密码"  prop="password">
          <input type="password" v-model="model.password">
        </FormItem>
        <FormItem>
          <Button color="primary" :loading="isLoading" @click="submit">提交</Button>&nbsp;&nbsp;&nbsp;
          <Button @click="reset">重置</Button>
        </FormItem>
      </Form>

            </div>
        
      
        </div>
      
      </main>
  
      
  
    
  
    </div>
  </template>
  
  
   
  <script>
  
  
  import mh from './mh.vue'
  
  export default {
    data () {
      return {
        msg: "这是一个变量",
        isLoading: false,
        model: {
          username: '',
          password: ''
        },
        rules: {
          required: ['username', 'password']
        },
        showErrorTip: true,
      }
    },
    components: {
          'mh':mh
    },
    mounted:function(){
  
  },
    methods:{
  
        submit() {
        this.isLoading = true;
        let re = this.$refs.form.valid();
        if (re.result) {

         

          this.$Message('验证成功');
          
          setTimeout(() => {
            this.isLoading = false;
          }, 1000);
  
        } else {
          this.isLoading = false;
        }
      },
      reset() {
        this.model.username = '';
        this.model.password = '';
      }
    }
  }
  
  
  </script>
   
  <style>
  
  
  
  </style>